import React, { useEffect, useRef } from 'react';
import G6 from '@antv/g6';
import {
  Group,
  Rect,
  Text,
  Circle,
  Image,
  createNodeFromReact,
} from '@antv/g6-react-node';

function CustomNode(props) {
  const ref = useRef(null);

  useEffect(() => {
    if (!ref.current) {
      return;
    }

    const ReactNode = ({ cfg = {} }) => {
      return (
        <Group>
          <Rect>
            <Rect
              style={{
                width: 150,
                height: 55,
                stroke: cfg.color,
                fill: '#ffffff',
                radius: [0, 0, 6, 6],
              }}
            >
              <Text style={{ marginTop: 5, fill: '#333', marginLeft: 4 }}>
                啦啦啦啦啦啦
              </Text>
            </Rect>
          </Rect>
          <Circle
            style={{
              stroke: cfg.color,
              r: 10,
              fill: '#fff',
              marginLeft: 75,
              cursor: 'pointer',
            }}
            name="circle"
          >
            <Image
              style={{
                img: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ',
                width: 12,
                height: 12,
                marginLeft: 69,
                marginTop: -5,
              }}
            />
          </Circle>
        </Group>
      );
    };
    G6.registerNode('yourNode', createNodeFromReact(ReactNode));

    const graph = new G6.Graph({
      container: ref.current,
      width: 800,
      height: 500,
      // 默认状态下节点的配置
      defaultNode: {
        type: 'yourNode',
        // 指定连入节点的连接点位置
        anchorPoints: [
          [0.5, 0],
          [0.5, 1],
        ],
      },
    });

    graph.data({
      nodes: [
        {
          id: 'node1',
          x: 100,
          y: 100,
          size: [100, 50],
          label: 'Custom Node',
          // 使用 dom-node 作为自定义节点类型
          shape: 'yourNode',
        },
      ],
      edges: [
        {
          id: 'edge1',
          source: 'node1',
          target: 'node2',
        },
      ],
    });

    graph.render();
  }, []);

  return <div ref={ref} />;
}

export default CustomNode;
